<template>
    <div id="dictionaryGroup">
        <h2>{{parentLabel}}</h2>
        <el-divider></el-divider>
        <el-button type="primary" @click="showAdd" >添加属性</el-button>
        <el-divider></el-divider>
        <el-table
                :data="tableData.rows"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border>

            <el-table-column
                    prop="id"
                    sortable
                    label="编号">
            </el-table-column>

            <el-table-column
                    prop="label"
                    label="组名">
            </el-table-column>

            <el-table-column
                    prop="value"
                    label="字段值(整数)">
            </el-table-column>

            <el-table-column
                    prop="code"
                    label="字段编号">
            </el-table-column>
            <el-table-column
                    sortable
                    prop="sort"
                    label="排序(小到大)">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="字典描述">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="showEdit(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="deleteDictionary(scope.$index,scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="title" @close="closeDialog" :visible.sync="dialogEditVisible">
            <el-form :model="form" :rules="rules">
                <el-form-item label="id" :label-width="'150px'" v-show="form.id !== null" >
                    <el-input v-model="form.id" readonly></el-input>
                </el-form-item>
                <el-form-item prop="code" label="字段编号" :label-width="'150px'">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item prop="label" label="名称" :label-width="'150px'">
                    <el-input v-model="form.label"></el-input>
                </el-form-item>
                <el-form-item prop="value"  label="字段值(对应表字段)" :label-width="'150px'" >
                    <el-input v-model="form.value"></el-input>
                </el-form-item>
                <el-form-item prop="sort"  label="排序" :label-width="'150px'">
                    <el-input v-model="form.sort"></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="'150px'">
                    <el-input v-model="form.description"></el-input>
                </el-form-item>
                <el-form-item label="组代号" :label-width="'150px'" v-show="false">
                    <el-input v-model="form.parentCode"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogEditVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "DictionaryGroup",
        data(){
            return{
                rules: {
                    code: [
                        { required: true, message: '请输入!', trigger: 'blur' },
                    ],
                    label: [
                        { required: true, message: '请输入!', trigger: 'blur' },
                    ],
                    value: [
                        { required: true, validator: this.$rules.validatePlusInteger, trigger: 'blur'}
                    ],
                    sort: [
                        { type:"number", validator: this.$rules.validatePlusInteger, trigger: 'blur' },

                    ]
                },
                title:null,
                dialogEditVisible:false,
                parentCode: null,
                parentLabel: null,
                tableData:{
                    size:null,
                    current:null,
                    total:null,
                    rows: [
                    ]
                },
                form: {
                    id: null,
                    code: null,
                    label: null,
                    parentCode: null,
                    value: null,
                    sort: null,
                    description: null
                }
            }
        },
        methods: {
            async requestData() {
                let resp = await this.$http.get("/sysDictionary/getByParentCode?parentCode="+this.parentCode);
                let data = resp.data;
                if (data.code === 200){
                    this.tableData = data;
                }else {
                    this.$message.error(data.info);
                }
            },
            showAdd(){
                this.title = '新增字典';
                this.form = {
                    id: null,
                    code: null,
                    label: null,
                    value: null,
                    sort: null,
                    description: null
                };
                this.dialogEditVisible = true;

            },
            showEdit(row){
                this.title = '编辑字段';
                this.form = {
                    id: row.id,
                    code: row.code,
                    label: row.label,
                    value: row.value,
                    sort: row.sort,
                    description: row.description
                };
                this.dialogEditVisible = true;
            },
            deleteDictionary(index,row){
                this.$confirm('确定删除?','提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete('/sysDictionary/deleteAndChild/'+row.id).then(resp => {
                        let data = resp.data;
                        if (data.code === 200){
                            this.$message.success(data.info);
                            this.requestData();
                        }else {
                            this.$message.success(data.info);
                        }
                    })
                }).catch(() => {})
            },
            async addOrEdit() {
                this.form.parentCode = this.parentCode;
                console.log(this.form);
                let resp;
                if (this.form.id === null){
                    resp = await this.$http.post("/sysDictionary/add", this.form);
                }else {
                    resp = await this.$http.put("/sysDictionary/edit", this.form);
                }
                let data = resp.data;
                if (data.code === 200){
                    this.requestData();
                    this.$message.success(data.info);
                    this.dialogEditVisible = false;
                }else {
                    this.$message.error(data.info);
                }
            },
            closeDialog(){
                this.form = {
                    id: null,
                    code: null,
                    label: null,
                    value: null,
                    sort: null,
                    description: null
                };
            }
        },
        created() {
            this.parentCode = this.$route.query.code;
            this.parentLabel = this.$route.query.label;
            this.form.parentCode = this.$route.query.code;
            this.requestData();
        }
    }
</script>

<style scoped>

</style>
